<template>
    <a-drawer
        title="查看"
        :visible="visible"
        :width="width || '1000px'"
        :confirmLoading="confirmLoading"
        @close="handleCancel"
    >
        <div class="xlSeeFrom">
            <div class="xlSeeFrom-view">
                <a-descriptions bordered   :column="2">
                    <a-descriptions-item label="政策名称" :span="1">
                        <span>
                            {{ model['policyTitle'] || '--' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="政策类型" :span="1">
                        <span>
                            {{getSelectData($store.getters.dictionary['POLICY_TYPE'],model['policyType'])}}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="政策来源" :span="1">
                        <span>
                            {{ model['policySource'] || '--' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="政策原文地址" :span="1">
                        <span>
                            {{ model['policySourceUrl'] || '--' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="原文地址是否失效" :span="1">
                        <span>
                            {{ model['urlInvalid'] ? '失效' : '有效' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="政策区域名称" :span="1">
                        <span>
                            {{ model['policyAreaName'] || '--' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="发布部门名称" :span="1">
                        <span>
                            {{ model['publishDepartmentName'] || '--' }}
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="发布时间" :span="1">
                    <span>
                        {{getData(model['publishDateTime'],'dateTime')}}
                    </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="政策原文内容" :span="2">
                        <span>
                            <div v-html="model['policyOriginalTextContent']">
                            </div>
                        </span>
                    </a-descriptions-item>

                    <a-descriptions-item label="附件" :span="2">
                        <span>
                            <template v-for="(item, index) in model['policyAttachments']" >
                                <a :href="item.filePath" :download="item.fileName">{{item.fileName}}</a><br>
                            </template>
                        </span>
                    </a-descriptions-item>

                </a-descriptions>
            </div>
            <div class="drawer-footer">
                <a-button @click="handleOk" type="primary">
                    关闭
                </a-button>
            </div>
        </div>
    </a-drawer>
</template>

<script>
import moment  from "moment"
export default {
    name: "xlSeeFrom",
    data() {
        return {
            visible: false,
            type: 1,
            formData: [],
            model: {},
            confirmLoading: false,
            tableTitle: '查看'
        }
    },
    props:{
        width:String
    },
    components:{
    },
    created() {

    },
    methods: {
        handleOk() {
            this.confirmLoading = false
            this.visible = false
        },
        formatData(columns,formData) {
            console.log(formData,78)
            this.formData = []
            this.model = formData
            columns.map((item, index) => {
                if (item.key != "rowIndex" && item.dataIndex != "action"  && item.type) {
                    this.formData.push(item)
                }else{
                    if(item.children){
                        this.formatChild(item.children)
                    }
                }
            })
        },
        formatChild(children){
            children.map((item,index)=>{
                if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                    this.formData.push(item)
                }else{
                    if(item.children){
                        this.formatChild(item.children)
                    }
                }
            })
        },
        handleCancel() {
            //关闭窗口
            this.visible = false
        },
        getSelectData(data,text){
            if(data){
                const target = data.filter(item => text == item.codeMasterValue)[0]?.codeMasterName || data.filter(item => text == item.dataValue)[0]?.dataName || '--'
                return target
            }else{
                return text
            }
        },
        getData(date,item){
            if(date){
                if(item == 'date'){
                    return moment(date).format('YYYY-MM-DD')
                }
                if(item == 'dateTime'){
                    return moment(date).format('YYYY-MM-DD HH:mm:ss')
                }
                if(item == 'month'){
                    return moment(date).format('YYYY-MM')
                }
                if(item == 'year'){
                    return moment(date).format('YYYY')
                }

            }else{
                return '--'
            }
        }
    }
}
</script>


<style lang="less">
.ant-drawer-body {
    width: 100%;
    height: calc(100% - 55px);

    .xlSeeFrom {
        width: 100%;
        height: 100%;

        .xlSeeFrom-view{
            width: 100%;
            height: calc(100% - 50px);
            overflow-y: scroll;
            .ant-descriptions-item-label{
                padding: 16px;
                word-break: keep-all;
            }
            .ant-card{
                margin-bottom: 10px;
            }
        }

        .drawer-footer {
            width: 100%;
            height: 50px;
            border-top: 1px solid #e8e8e8;
            border-radius: 0 0 4px 4px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}
</style>
